<template lang="pug">
  .page.share(v-if="isShow")
    CtrlBar(@closeBar='isShow = false')
    .qrcode.pos-r(name="slot")
      h3.tac 扫描二维码分享给朋友
      img(:src="baseUrl + '/api_qrcode.aspx?id=' + panoId + '&newpano=1'")
      p.tac
        a(:href="viewUrl + panoId", target="_blank") {{viewUrl + panoId}}
</template>

<script>
import CtrlBar from '@/components/CtrlBar'
export default {
  data() {
    return {
      isShow: false,
      panoId: null,
      baseUrl: $globalconfig.URLS.API,
      viewUrl: $globalconfig.URLS.PANO_VIEW_PREFIX
    }
  },
  mounted() {
    this.panoId = this.$route.params.panoId
    this.$vgo.on('model:share', () => {
      this.isShow = true
    })
  },
  components: {
    CtrlBar
  }
}
</script>

<style lang="stylus" scoped>
$blue = #20A0FF
.share
  display: flex
  justify-content: center
  .qrcode
    width: 100%
    padding: 20px 0
    align-self: center
    background-color: #fff
    h3
      font-size: 16px
    a
      color: $blue
      font-size: 14px
    img
      margin: 20px auto
      max-width: 260px
      max-height: 260px

</style>
